<template>
	<view  
	v-if="item"
	class="item"
	 @tap="addViews(item)"
	 >
		<view class="title text-ellipsis">
			{{item.title || ''}}
		</view>
		<view class="content flex-row">
			<view class="info">
				<view class="summary">
					{{item.summary || ''}}
				</view>
				<view class="flex-row">
					<text class="date">{{item.updateTime || ''}}</text>
					<text class="views">阅读量：{{item.views || ''}}</text>
				</view>
			</view>
			<view class="cover">
				<image v-if="list.cover" :src="list.cover" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{}
		},
		data(){
			return{
				list:this.item
			}
		},
		// onLoad(){
		// 	list:this.item
		// }
		methods:{
			// 添加阅读量
			addViews(item){
				item.views++;
				this.$request({
					url:this.$api.getArticleList,
					method:'POST',
					data:{
						id:item.id,
						views:item.views
					}
				})
				this.$toPage('/pages/article/detall?id='+item.id)
			}
		}
	}
			
</script>

<style lang="scss" scoped>
	.item {
		padding: 30rpx;
		margin-top: 10rpx;
		background-color: #fff;

		.title {
			font-weight: bold;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F5f5f5;
		}

		.content {
			padding-top: 30rpx;
			align-items: flex-start;

			.info {
				// 宽度自计算   减号两边都要空格
				width: calc(100% - 160rpx);

				.summary {
					color: #777;
					font-size: 24rpx;
					line-height: 1.4;
					margin-bottom: 20rpx;
					height: 70rpx;
					@include text-ellipsis(2);
				}

				.date {
					font-size: 24rpx;
					color: #FF5500;
					opacity: .6;
				}

				.views {
					color: #999;
				}
			}

			.cover {
				width: 140rpx;
				height: 120rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 4rpx;
				}
			}

		}
	}
</style>
